Hacks布局篇-Hack3 使用merge标签减少布局层级

发表于   |   分类于   |     |   阅读

<merge/>

作者：李旺成
时间：2016年5月7日

在这个 Hack 中将详细介绍 标签的使用，以及一些注意事项。

关于嵌套层级

Android 开发中关于布局优化有一个很常用的技巧，就是减少布局的嵌套层级。布局的嵌套层级越深，渲染该页面就会越慢，程序的性能也就会越差。

使用 Hierarchy Viewer 可以比较直观的看到布局的嵌套层级：

HierarchyViewer使用示例

常用的减少布局层级的方法是尽量使用 RelativeLayout，往往很多使用 LinearLayout 需要嵌套很多层才能达到的效果，改用 RelativeLayout 可能就不需要嵌套了。

使用 RelativeLayout 只是一方面，Google 提供了 标签用于减少布局层级来。 标签通过删减多余或者额外的层级，从而优化整个 Android 布局的结构。

注意：如果你打开 HierarchyViewer 却不能查看任何布局，那么可以试试这个 ViewServer。

标签的使用

多用于替换 FrameLayout 或者当一个布局包含另一个时， 标签消除视图层次结构中多余的视图组。例如你的主布局文件是垂直布局，引入了一个垂直布局的 include，这时如果 include 布局使用 LinearLayout 就没意义了，使用的话反而会减慢你的 UI 表现。这时可以使用 标签优化。

替换 FrameLayout

分别来看一下根标签使用 FrameLayout 与 使用 merge 有什么区别：
activity_hack3_1.xml ：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".Hack3Activity">
    <include
        layout="@layout/header_withmerge"/>
    <include
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        layout="@layout/footer_app_name"/>
</FrameLayout>

activity_hack3_2.xml ：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".Hack3Activity">
    <include
        layout="@layout/header_withmerge"/>
    <include
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:layout_marginBottom="30dp"
        layout="@layout/footer_app_name"/>
</merge>

上面两个布局文件差别不大，只是 activity_hack3_2 中使用 merge 替换了 activity_hack3_1 中的 Framelayout，使用 HierarchyViewer 看看这两个布局有什么差别：

Framelayout做根标签

merge做根标签

对比上面两张图，发现使用 标签替换 Framelayout 之后可以减少一层。所以，如果用到 Framelayout 作为根布局的地方，大可以直接替换为 merge。

与 配合

如果要 include 的子布局的根标签是 Framelayout，那么最好替换为 merge，这样可以减少嵌套。

如果，子布局直接以一个控件为根节点，也就是只有一个控件的情况，这时就没必要再使用 包裹了，如下所示：

merbe 和 include

如图所示，这两个 include 的子布局都只有一层，没有其他布局嵌套。

上图对应的布局代码 activity_hack3.xml：

1
2
3
4
5
6
7
8
9
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    ...
	>
    <include
        layout="@layout/header_withmerge"/>
    <include
        layout="@layout/footer_app_name"/>
</RelativeLayout>

用到的两个子布局：
header_withmerge.xml

1
2
3
4
5
6
7
8
9
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android">
<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="40dp"
    android:text="使用了 <merge /> 标签的页眉"
    android:textColor="@android:color/holo_red_light"/>
</merge>

footer_app_name.xml，前面已经介绍过了，这里就不再赘述。

作为 ListView Item 的根标签

这里做个实验，使用根标签为 的布局作为 ListView 的 Item。
1、创建 Item 布局
见 item_hack3lv.xml：

1
2
3
4
5
6
7
8
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="使用merge作为ListView Item的根标签"
        android:textColor="@android:color/holo_red_light"/>
</merge>

不需要多说，就是以 merge 作为根标签。

2、自定义 Adapter
这里看看 getView() 方法即可：

1
2
3
4
5
6
7
8
9
@Override
public View getView(int position, View convertView, ViewGroup parent) {
	if (convertView == null) {
//            convertView = mInflater.inflate(R.layout.item_hack3lv, parent, true);
//            convertView = mInflater.inflate(R.layout.item_hack3lv, parent, false);
		convertView = mInflater.inflate(R.layout.item_hack3lv, null);
	}
	return convertView;
}

上面的示例代码中，采用了三种方式来 inflate Item 的布局文件。先不要去关注上面的写法是否有误，这里是为了做实验。

3、为 ListView 设置 Adapter

1
mContentLV.setAdapter(new Hack3LVAdapter(this));

看看这三种不同方式所产生的后果：

inflate(R.layout.item_hack3lv, parent, true)

inflate(R.layout.item_hack3lv, parent, false)

inflate(R.layout.item_hack3lv, null)

PS：第二种方式和第三种方式其实是一样的，可以看源码：

1
2
3
4
5
public View inflate(@LayoutRes int resource, @Nullable ViewGroup root) {
	return inflate(resource, root, root != null);
}

// 就是调的 public View inflate(@LayoutRes int resource, @Nullable ViewGroup root, boolean attachToRoot)

有兴趣的同学可以去研究下 LayoutInflate，以及 LayoutInflate 的 inflate 方法各个参数的含义和作用，这里就不展开了。

这里只是的得出一个教训，不要使用 作为 ListView Item 的根节点。

注意事项

使用 很简单，但在其使用过程中有些地方需要注意，下面提供一些供参考。

  • 只能作为布局的根标签使用
  • 不要使用 作为 ListView Item 的根节点
  • 标签不需要设置属性
    写了也不起作用，因为系统会忽略 标签
  • inflate 以 为根标签的布局时要注意
    • 必须指定一个父 ViewGroup
    • 必须设定 attachToRoot 为 true
      也就是说 inflate(@LayoutRes int resource, @Nullable ViewGroup root, boolean attachToRoot) 方法的二个参数 root 不能为 null，并且第三参数 attachToRoot 必须传 true

项目地址

AndroidHacks合集
布局篇
个人博客
示例用到代码见：
Hack3Activity.java
Hack3LVAdapter.java
activity_hack3.xml
activity_hack3_1.xml
activity_hack3_2.xml
item_hack3lv.xml
header_withmerge.xml

参考

Android抽象布局——include、merge 、ViewStub
Android 性能优化 四 布局优化merge标签的使用

坚持原创技术分享，您的支持将鼓励我继续创作！